<template>
  <div class="page adaofu-form">
    <div class="container" :style="bg">
      <div class="warn" v-if="from === 'shopOpen'">
        <p>填写资料将获得：</p>
        <p>阿道夫中样洗护产品1瓶</p>
      </div>
      <div class="form">
        <div class="form-item">
          <input type="text" name="name" v-model="userName"/>
        </div>
        <div class="form-item">
          <input type="text" name="phone" v-model="phone"/>
        </div>
        <div class="form-item">
          <input type="text" name="address" v-model="address"/>
        </div>
      </div>
      <div class="info">
        <p>请将上方的信息补充完整，</p>
        <p>我们将会通过快递的形式，</p>
        <p>将开店贺礼送到您的手中，请耐心等候~</p>
        <p>若有疑问，</p>
        <p>欢迎随时私信阿道夫</p>
        <p>官方微信公众号/官方微博进行咨询！</p>
      </div>
      <div class="btn">
        <div @click="onSubmit">提交</div>
        <div @click="onClose">关闭</div>
      </div>
    </div>
    <m-toast v-model="toastContent"></m-toast>
    <alert11-dialog1 :show.sync="showAlert11Dialog1" :resultType="resultType"></alert11-dialog1>
  </div>
</template>

<script>
import { sourceDomain } from '@/utils/constant'
import mixins from 'comp/mixins'
import MToast from 'comp/m-toast'
import Alert11Dialog1 from 'comp/alert11-dialog1'

export default {
  mixins: [mixins],
  components: {
    MToast,
    Alert11Dialog1
  },
  data () {
    return {
      icons: {
        bg: `${sourceDomain}/bg2.png`,
      },
      userName: '',
      phone: '',
      address: '',
      toastContent: '',
      from: '',
      showAlert11Dialog1: false,
      resultType: ''
    }
  },
  computed: {
    bg () {
      return `background-image: url(${this.icons.bg});`
    },
  },
  mounted () {
    this.resetData()
    this.from = this.$root.$mp.page.options.from
  },
  methods: {
    checkForm () {
      if (!this.userName) {
        this.toastContent = '请先输入姓名'
        return false
      }
      if (!this.phone) {
        this.toastContent = '请先输入电话号码'
        return false
      }
      if (!this.address) {
        this.toastContent = '请先输入地址'
        return false
      }
      return true
    },
    async onSubmit () {
      if (!this.checkForm()) {
        return false
      }
      let param
      if (this.from === 'shopOpen') {
        param = {
          realname: this.userName,
          phone: this.phone,
          address: this.address,
          isopengift: '1'
        }
      } else {
        param = {
          realname: this.userName,
          phone: this.phone,
          address: this.address
        }
      }
      const ret = await this.$store.dispatch('updatePlayerContact', param)
      if (ret.data) {
        if (this.from === 'exchange') {
          wx.showModal({
            title: '提示',
            content: '资料提交成功',
            confirmText: '确认',
            showCancel: false,
            success: (res) => {
              if (res.confirm) {
                wx.navigateBack()
              }
            }
          })
        } else {
          this.resultType = ret.data.gitfresult ? 'success' : 'error'
          this.showAlert11Dialog1 = true
        }
      }
    },
    onClose () {
      wx.navigateBack()
    }
  }
}
</script>

<style lang="less" scoped>
.adaofu-form {
  .container {
    position: relative;
    min-height: 100%;
    min-height: 100vh;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .warn {
    font-size: 27rpx;
    font-weight: bold;
    color: #371e0e;
    position: absolute;
    top: 50%;
    margin-top: -290rpx;
    width: 100%;
    text-align: center;
  }
  .info {
    font-size: 20rpx;
    color: #3f2311;
    position: absolute;
    top: 50%;
    margin-top: 117rpx;
    width: 100%;
    text-align: center;
  }
  .btn {
    display: flex;
    justify-content: space-between;
    width: 326rpx;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 354rpx;
    margin-left: -163rpx;
    font-size: 32rpx;
    color: #3f2311;
    font-weight: bold;
  }
  .form {
    width: 340rpx;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -172rpx;
    margin-left: 232rpx;
    &-item {
      input {
        width: 340rpx;
        height: 38rpx;
        min-height: 38rpx;
        line-height: 38rpx;
        color: #fff;
        font-size: 27rpx;
        margin-bottom: 58rpx;
      }
    }
  }
}
</style>
